<template>
  <FrontSideTreeTable
    treeDataUrl="/sys/menu/getList"
    tableDataUrl="/rel/menuFunction/getMenuFunctionList"
    addUrl="/rel/menuFunction/add"
    editUrl="/rel/menuFunction/edit"
    deleteUrl="/rel/menuFunction/delete"
    treeTitle="菜单"
    :tableTitle="selectedNode.name+'功能列表'"
    searchHint="根据菜单、功能名称或功能类型查找"
    :tableProps="tableProps"
    :searchProps="searchProps"
    :columns="columns"
    :form="form"
    :rules="rules"
    :loadingForm="loadingForm"
    @beforeAdd="beforeAdd"
    @beforeEdit="beforeEdit"
    @onTableCreated="onTableCreated"
    @onTreeCreated="onTreeCreated"
    @onNodeClick="handleNodeClick">
    <!--对话框区域-->
    <template slot="form">
      <el-form-item label="菜单" prop="menuId">
        <el-select v-model="form.menuId" style="width: 100%" placeholder="请选择菜单，输入文字可搜索" filterable>
          <el-option v-for="item of treeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="功能" prop="functionId">
        <el-select v-model="form.functionId" style="width: 100%" placeholder="请选择功能，输入文字可搜索" filterable>
          <el-option v-for="item of functionTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </template>
  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"
  import {doGet} from "../../../assets/js/utils/RequestUtils"

  /* 获取功能菜单的地址 */
  const functionTypeUrl = "/sys/function/getList";

  export default {
    name:"FunctionRegistry",
    data() {
      let functionValidator = (rule, value, callback)=>{
        if(this.tableData.some(item=>item.functionId === value && item.menuId === this.form.menuId)) {
          callback("菜单下已存在该功能");
        }else {
          callback();
        }
      };

      return {
        /*  树形菜单数据  */
        treeData: [],

        /*  表格数据  */
        tableData: [],

        /*  功能类型  */
        functionTypes: [],

        /*  表单数据  */
        form: {
          menuId:"",
          functionId:""
        },

        //加载表单
        loadingForm: false,

        //搜索的字段
        searchProps:["menuName", "functionName", "functionType"],

        //表格属性名
        tableProps:{
          parentId: "menuId"
        },

        //表格列
        columns:[
          {prop:"menuName", label:"菜单"},
          {prop:"functionName", label:"功能名称"},
          {prop:"functionType", label:"功能类型"}
        ],

        rules:{
          menuId: [
            {required: true, message: "请选择菜单", trigger:"blur"}
          ],
          functionId: [
            {required: true, message: "请选择功能", trigger:"blur"},
            {validator:functionValidator, trigger:"blur"}
          ]
        },

        selectedNode:{name:""}
      }
    },
    methods: {
      onTreeCreated(treeData) {
        this.treeData = treeData;
      },

      onTableCreated(tableData) {
        this.tableData = tableData;
      },

      handleNodeClick(data) {
        this.selectedNode = data;
      },

      beforeAdd() {
        this.loadingForm = true;
        this.fetchFormData();
        this.isUpdateDialogVisible = true;
        clearFields(this.form);
        this.form = {menuId:this.selectedNode.id, functionId:""};
      },

      beforeEdit(data) {
        this.loadingForm = true;
        this.fetchFormData();
        this.isUpdateDialogVisible = true;
        this.form = {...data}
      },

      //获取数据
      fetchFormData() {
        //加载树数据
        doGet(functionTypeUrl, {component: this})
          .then(response => this.functionTypes = response)
          .finally(()=>this.loadingForm = false);
      }
    },
    components:{FrontSideTreeTable}
  }
</script>



// WEBPACK FOOTER //
// FunctionRegistry.vue?d4b30476